import React, { Fragment, Component } from 'react';
import { View, Text, StyleSheet, TouchableHighlight, Switch } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
class SettingItem extends Component {
  constructor() {
    super();
    this.state = {
        isOn:false
    };
  }
  render() {
    var rightTitle;
    if(this.props.hasOwnProperty('rightTitle')){
        rightTitle=(
            <Text style={{position:'absolute',right:20,width:50,top:5}}>{this.props.rightTitle}</Text>
        )  
    }else{
        rightTitle=null;
    }
    rightTitle
    return (
      <Fragment>
        <TouchableHighlight>
            {
                this.props.isSwitch?(<View style={styles.container}><Text style={{marginLeft:15}}>{this.props.title}</Text><Switch value={this.state.isOn} onValueChange={()=>{this.setState({isOn:!this.state.isOn})}} style={{marginRight:15}}/></View>):(<View style={styles.container}><Text style={{marginLeft:15}}>{this.props.title}</Text><View>{rightTitle}<Ionicons name={'ios-arrow-forward'} size={24}  style={{marginRight:15}}/></View></View>)
            }
        </TouchableHighlight>
      </Fragment>
    );
  }
}
const styles = StyleSheet.create({
  container: {
      backgroundColor:'#fff',
      flexDirection:'row',
      justifyContent:'space-between',
      height:50,
      alignItems:'center'
  }
});
export default SettingItem;
